<template>
  <div class="choose-body">
    <h3>为何选择pointlink</h3>
    <div class="why">
      <img :src="imgRes[0]" alt="" />
      <div>
        <p>实时汇率</p>
        <span>比较全亚洲外汇兑换店提供的优惠汇率免去问价麻烦</span>
      </div>
    </div>
    <div class="why">
      <img :src="imgRes[1]" alt="" />
      <div>
        <p>锁定汇率</p>
        <span>实时兑换汇率锁定，预约实体店兑换</span>
      </div>
    </div>
    <div class="why">
      <img :src="imgRes[2]" alt="" />
      <div>
        <p>兑换便捷</p>
        <span>随时随地通过APP线上一键兑换 APP线上预约，线下实体店兑换</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    this.imgRes = [
      require("../assets/icon1.png"),
      require("../assets/icon2.png"),
      require("../assets/icon3.png"),
    ];
  },
  data() {
    return {
      imgRes: [],
    };
  },
};
</script>

<style lang="scss" scoped>
.choose-body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  text-align: start;
  margin-top: 30px;
  h3 {
    font-size: 18px;
    font-family: Source Han Sans CN;
    font-weight: bold;
    color: #333333;
  }
  .why {
    padding: 20px;
    display: flex;
    flex-direction: row;
    align-items: center;
    div {
      margin-left: 30px;
      display: flex;
      height: 120px;
      flex-direction: column;
      justify-content: space-around;
      padding: 10px 0;
      p {
        font-size: 22px;
        font-family: Source Han Sans CN;
        font-weight: bold;
        color: #333333;
      }
      span {
        font-size: 12px;
        font-family: Source Han Sans CN;
        color: #333333;
        line-height: 30px;
      }
    }
  }
}
</style>